import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
import { DEFAULT as breakpoints } from '@peng_kai/theme/breakpoints';
import { theme } from 'ant-design-vue';
import { generalInputTheme, generalSelectTheme } from './antdConfig';

export function useAntdTheme() {
  const screenXS = Number.parseFloat(breakpoints.mobile);
  const screenSM = Number.parseFloat(breakpoints.mobilel);
  const screenMD = Number.parseFloat(breakpoints.tablet);
  const screenLG = Number.parseFloat(breakpoints.tabletl);
  const screenXL = Number.parseFloat(breakpoints.laptop);
  const screenXXL = Number.parseFloat(breakpoints.desktop);
  const screenXXXL = Number.parseFloat(breakpoints.desktop1k);

  // const defaultToken = theme.defaultAlgorithm({ ...theme.defaultSeed, colorPrimary: '#B91B1B', controlHeight: 44 });
  // console.log('🤡 / useAntdTheme / defaultToken:', defaultToken);

  const token: ThemeConfig['token'] = {
    ...theme.darkAlgorithm({
      ...theme.defaultSeed,
      colorPrimary: '#B91B1B',
      motionUnit: 0.05,
      // motionBase: 6,
      borderRadius: 8,
      controlHeight: 42,
      fontFamily: 'Montserrat Variable, sans-serif',
    }),

    // 需要使主题色不变
    colorPrimary: '#b91b1b',
    colorPrimaryActive: '#940f13',
    colorPrimaryBg: '#faedeb',
    colorPrimaryBgHover: '#edc2bb',
    colorPrimaryBorder: '#e0968d',
    colorPrimaryBorderHover: '#d46b63',
    colorPrimaryHover: '#c7423e',
    colorPrimaryText: '#b91b1b',
    colorPrimaryTextActive: '#940f13',
    colorPrimaryTextHover: '#c7423e',

    screenXS,
    screenXSMin: screenXS,
    screenXSMax: screenSM - 0.1,
    screenSM,
    screenSMMin: screenSM,
    screenSMMax: screenMD - 0.1,
    screenMD,
    screenMDMin: screenMD,
    screenMDMax: screenLG - 0.1,
    screenLG,
    screenLGMin: screenLG,
    screenLGMax: screenXL - 0.1,
    screenXL,
    screenXLMin: screenXL,
    screenXLMax: screenXXL - 0.1,
    screenXXL,
    screenXXLMin: screenXXL,
    screenXXLMax: screenXXXL - 0.1,
    screenXXXL,
    screenXXXLMin: screenXXXL,
  };
  const components: ThemeConfig['components'] = {
    Input: {
      ...generalInputTheme,
    },
    InputNumber: {
      ...generalInputTheme,
    },
    Popover: {
      ...generalSelectTheme,
    },
    Dropdown: {
      ...generalSelectTheme,
    },
    DatePicker: {
      ...generalInputTheme,
      ...generalSelectTheme,
      controlHeightLG: 42,
      controlHeightSM: 28,
    },
    Select: {
      ...generalInputTheme,
      ...generalSelectTheme,
    },
    TreeSelect: {
      ...generalInputTheme,
      ...generalSelectTheme,
    },
    Cascader: {
      ...generalInputTheme,
      ...generalSelectTheme,
    },
  };

  return { token, components };
}

/**
 controlHeight: 32
  controlHeightLG: 40
  controlHeightSM: 24
  controlHeightXS: 16
 */
